<template>
  <div class="post">
    <div class="friends">
         <div class="list_left">
            <img :src="imgHead" />
            <div class="text">
                <span class="text_name">张某某</span>
                <span class="text_content">2017年4月25日</span>
            </div>
         </div>
    </div>
    <div class="qustion">大家都喜欢什么类型的房子呢?</div>
    <div class="qustion_img">
          <video controls >
              <source  :src='qustion_img' type="video/mp4">
          </video>
    </div>
    <div class="text">
        <p>房地产是一个综合的较为复杂的概念，从实物现象看，它是由建筑物与土地共同构成。土地可以分为未开发的土地和已开发的土地，建筑物依附土地而存在，与土地结合在一起。建筑物是指人工建筑而成的产物，包括房屋和构筑物两大类。</p>
        <p>对于房地产的概念，应该从两个方面来理解：房地产既是一种客观存在的物质形态，同时也是一项法律权利。</p>
    </div>
    <div class="content_discuss">
        <div class="discuss_head">讨论(共555人)</div>
        <div class="discuss_list">
            <van-cell value="全部" is-link>
                <template slot="title">
                    <span class="custom-text">{{number}}人讨论</span>
                    <!-- <van-tag type="danger"> -->
                        <img  v-for="thumb in headerArr" :key="thumb" :src="thumb" class="arrImg">
                    <!-- </van-tag> -->
                </template>
            </van-cell>
            <div class="list" v-for="item in list" :key="item.id">
                <div class="flex">
                    <img :src="item.img"/>
                     <div class="text">
                        <span class="text_name">{{item.name}}</span>
                        <span class="text_content">签名：{{item.signature}}</span>
                        <div class="listArr"  v-for="sst in item.users" :key="sst.id">
                            {{sst.name}}：{{sst.text}}
                        </div>
                          <div class="text_tip">
                            <div class="min_text">{{item.time}}</div>
                            <div class="flex">
                                <div class="min_text">评论：{{item.pinlun}}</div>
                                <div class="min_text">评论：{{item.zan}}</div>
                            </div>
                        </div>
                    </div>
                  
                </div>
            </div>
             <div class="rightan">
                <span>查看所以讨论</span>
                <van-icon name="arrow-down" size='10px' color='#e5e5e5'/>
            </div>
        </div>
    </div>


    <div class="footer">
        <input placeholder="请输入评论"/>
        <van-button plain type="primary">提交</van-button>
    </div>
  </div>
  
</template>

<script>
import {  Icon, Cell, List,Button} from 'vant';

export default {
  components: {
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [List.name]: List,
     [Button.name]: Button,
  },
  data(){
    return{
        imgHead:'http://n.sinaimg.cn/translate/567/w781h586/20190425/KPde-hvvuiyn9279369.jpg',
        qustion_img:'http://video2s.soufun.com/2015/08/28/bj/mp4/fa16adc11bad4d80b6e8e3349ab1e64c.mp4',
        headerArr:[
            'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190329/9a45702df92e4abcbafe7253b7e949f0.jpeg',
            'http://n.sinaimg.cn/translate/567/w781h586/20190425/KPde-hvvuiyn9279369.jpg',
        ],
        list:[
            {
                id:'0',
                img:'https://img.52z.com/upload/news/image/20180129/20180129092455_98714.jpg',
                name:'艰辛',
                signature:'生活痛苦。。。。',
                users:[
                    {
                        id:0,
                        name:'，偶，',
                        text:'hdfjdhfjh'
                    },
                     {
                        id:1,
                        name:'某某',
                        text:'。。。。。'
                    },
                
                ],
                time:'2019年5月12日',
                pinlun:10,
                zan:10
            }
        ],
    }
  },
  computed:{
      number:function(){
          return this.headerArr.length
      }
  },
  methods:{
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        // 加载状态结束
        this.loading = false;
         for (let i = 0; i < 5; i++) {
          this.list.push(this.list.length);
        }
        // 数据全部加载完成
        if (this.list.length >= 10) {
          this.finished = true;
        }
      }, 500);
    }
  }
};
</script>

<style lang="less">
.post{
         background: #ffffff;
        //  padding: 10px 10px;
        //  box-sizing: content-box;
      
    .friends {
        padding: 10px 10px;
        box-sizing: content-box;
        border-bottom: 1px solid #e5e5e5;
     display: flex;
        flex-direction: row;
        justify-content:space-between;
        .list_left{
            display: flex;
            flex-direction: row;
            justify-content:flex-start;
            img{
                width: 35px;
                height: 35px;
                border-radius: 50%;
            }
            .text{
                margin-left: 5px;
                display: flex;
                flex-direction: column;
                .text_name{
                font-size: 14px;
                display: inline-block;
                }
                .text_content{
                font-size: 12px;
                color: #e5e5e5;
                }
            }
        }
        button{
            width: 70px;
            height: 35px;
            line-height: 35px;
            font-size: 12px;
            border: 1px solid #e5e5e5;
            border-radius: 3px;
            background-color: transparent;

        }
    }
    .qustion{
        font-size: 14px;
        // text-align: center;
        margin-left: 10px;
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
    }
    .qustion_img{
        padding: 10px 10px;
        box-sizing: border-box;
        video{
            width: 100%;
            height: 130px;
        }
    }
    .text{
        font-size: 12px;
        padding: 10px 10px;
        box-sizing: content-box;
        p{
            text-indent: 2;

        }
    }
    .content_discuss{
        .discuss_head{
            margin-bottom: 10px;
        }
        .discuss_list{
            border: 1px solid #e5e5e5;
            padding: 10px 10px;
                box-sizing: border-box;
            .custom-text{
                margin-right: 10px;
            }
            .arrImg{
                width: 20px;
                height: 20px;
                border-radius: 50%;
            }
            .list{
                padding: 10px 10px;
                box-sizing: border-box;
                border-bottom: 1px solid #e5e5e5;
                margin-bottom: 10px;
                img{
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                }
                 .text{
                     width: 100%;
                    margin-left: 5px;
                    display: flex;
                    flex-direction: column;
                    .text_name{
                        font-size: 14px;
                        display: inline-block;
                    }
                    .text_content{
                        font-size: 12px;
                        color: #e5e5e5;
                    }
                      .text_tip{
                     display: flex;
                     flex-direction: row;
                     justify-content:space-between;
                     margin-top: 5px;
                     .flex_space{
                         margin-left: 10px;
                     }
                     .min_text{
                         font-size: 12px;
                         color: #e5e5e5;
                     }
                 }
                 }
                 .listArr{
                     font-size: 13px;
                 }
               
            }
            @-webkit-keyframes rightan
        {

        from
        {
            bottom: 0%;
            opacity: 0;
        }
        to
        {
            bottom: 10%;
            opacity: 1;
        }
    }
    .rightan{
         -webkit-animation: rightan 1s infinite;
        -webkit-animation-fill-mode: both;
        text-align: center;
        span{
            font-size: 12px;
            color: #e3e3e3;
        }

    }

        }
    }
    .flex{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .footer{
        width: 100%;
        position: fixed;
        bottom: 55px;
        height: 50px;
        border-top: 1px solid #e5e5e5;
        padding: 10px 10px;
        box-sizing: border-box;
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        input{
            width: 70%;
            height: 30px;
            padding-left: 5px;
            border-radius: 5px;
            border:1px solid #e5e5e5;
        }
        .van-button{
            height: auto;
            line-height: normal
        }
    
    }

    
}


 
</style>
